<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .header{
            width: 100%;
            margin: 100px 0;
        }

        .header_com{
            width: 500px;
            height: 300px;
            /*overflow: hidden;*/
            margin: 0 auto;
            /*background-color: aqua;*/
            border: 3px orangered dotted;
        }

        .header_com .header_p{
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            width: 450px;
            margin: 15px auto;
        }

        .header_com p{
            text-align: center;
            margin: 15px 0;
            width: 450px;
            margin: 0 auto;

        }

        .header_com label{
            display: inline-block;
            width: 52px;
            text-align: right;
            margin-right: 10px;
        }

        .header_sel{
            width: 337px;
            padding: 7px 10px;
            border: 1px solid gray;
            margin-top: 10px;
            margin-bottom: 10px;
            outline: none;
        }

        .header_inp{
            width: 70%;
            padding: 7px 10px;
            border: 1px solid gray;
            margin-top: 10px;
            margin-bottom: 10px;
            outline: none;
        }

        .header_com p button{
            width: 75%;
            text-align: center;
            padding: 5px 0;
            border: 1px solid orchid;
            margin: 20px auto;
            cursor: pointer;
            background-color: white;
            color: orchid;
        }

        .header_com button:hover{
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header_com">
        <p class="header_p">学生管理系统</p>

        <!--职务-->
        <form action="/" method="post" enctype="application/x-www-form-urlencoded">
            <p class="">
                <label>职务:</label>
                <select class="header_sel" name="gender">
                    <option disabled>请选择</option>
                    <option value="1">教师</option>
                    <option value="2">学生</option>
                </select>
            </p>

            <!--职务-->
            <p class="">
                <label>账号:</label>
                <input type="text" placeholder="请输入工号/学号" class="header_inp" name="uname" />
            </p>

            <!--职务-->
            <p class="">
                <label>密码:</label>
                <input type="password" placeholder="请输入密码" class="header_inp" name="upwd" />
            </p>

            <p>
                <button type="submit">登录</button>
            </p>
        </form>

    </div>
</div>
</body>
</html>